﻿@model ByHand.Model.Product
@{
    //var width = Convert.ToInt32(ViewData["width"]);
    //var height = Convert.ToInt32(ViewData["height"]);
    var imgs = Model.ImagePath.Split(';').Where(i => i.Length > 0).ToArray();
        //for (int i = 0; i < imgs.Length; i++)
        //{
        //    imgs[i] = imgs[i] + "?w=630&h=472&q=90&format=jpg&mode=crop";
        //}
}
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<div class="byhand-product-detail">
    <h3>@Model.Title</h3>
    <div id="carousel-example-generic" class="carousel slide border-top border-bottom">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>
<script src="~/Content/js/jquery.min.js"></script>
<script src="~/Content/js/bootstrap.min.js" ></script>
<script>
    var size = {
        width: window.innerWidth || document.body.clientWidth,
        height: window.innerHeight || document.body.clientHeight
    }
    var array = '@(string.Join(",", imgs))'.split(',');
    for (var i = 0; i < array.length; i++) {
        var active = "";
        if (i == 0) active = "active";
        $('.carousel-inner').append('<div class="item ' + active + '"> <img src="' + array[i] + '?w=' + size.width + '&h=' + size.height + '&q=90&format=jpg&mode=stretch" alt="..."> </div>');
    }
</script>
